<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo for Epub.js</title>

    <!-- 要想使用 epub，这两个 js 文件都必须得包含 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
    <script src="https://futurepress.github.io/epub.js/dist/epub.js"></script>

</head>
<body>
<div id="nav">
    <select id="toc"></select>
</div>

<div id="viewer"></div>
<script>
    var $viewer = document.getElementById("viewer");

    // Load the opf
    var book = ePub("./2013_Book_AndroidOnX86.epub", {store: "epubjs-test"});
    var rendition = book.renderTo("viewer", { width: "100%" });
    var displayed = rendition.display();

    book.loaded.navigation.then(function(toc){
        var $select = document.getElementById("toc"),
            docfrag = document.createDocumentFragment();

        toc.forEach(function(chapter) {
            var option = document.createElement("option");
            option.textContent = chapter.label;
            option.ref = chapter.href;

            docfrag.appendChild(option);
        });

        $select.appendChild(docfrag);

        $select.onchange = function(){
            var index = $select.selectedIndex,
                url = $select.options[index].ref;
            rendition.display(url);
            return false;
        };
    });
</script>
</body>
</html>

